<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../assert/css/font.css" th:href="@{/assert/css/font.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap.min.css" th:href="@{/assert/css/bootstrap.min.css}"/>
    <link rel="stylesheet" href="../../../assert/css/plugin/chosen/chosen.css"
          th:href="@{/assert/css/plugin/chosen/chosen.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-table.css" th:href="@{/assert/css/bootstrap-table.css}"/>
    <link rel="stylesheet" href="../../../assert/css/bootstrap-select.min.css"
          th:href="@{/assert/css/bootstrap-select.min.css}"/>
    <link href="../../../assert/css/animate.min.css" rel="stylesheet" th:href="@{/assert/css/animate.min.css}">
    <link href="../../../assert/css/plugin/toastr/toastr.min.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/toastr/toastr.min.css}">
    <link href="../../../assert/css/plugin/jsTree/themes/default/style.css" rel="stylesheet"
          th:href="@{/assert/css/plugin/jsTree/themes/default/style.css}">
    <link href="../../../assert/css/loaders.css" rel="stylesheet"
          th:href="@{/assert/css/loaders.css}">
    <link rel="stylesheet" href="../../../assert/css/city-picker.css" th:href="@{/assert/css/city-picker.css}"/>
    <link rel="stylesheet" href="../../../assert/css/jquery-ui.css" th:href="@{/assert/css/jquery-ui.css}"/>
    <link rel="stylesheet" href="../../../assert/css/index.css" th:href="@{/assert/css/index.css(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"/>

    <style>
        .search_group label.control-label{
            width:106px;
        }
    </style>
</head>
<body>
<a id="basePath" th:href="@{/}"></a>
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="tools_bar">
            <div class="pull-left">
                <a href="#" class="btn btn-default active" id="btnSearch" title="隐藏查询条"><i class="fa fa-filter"></i> 隐藏</a>
                <a href="#" class="btn btn-default active" id="refresh"><i class="fa fa-refresh"></i> 刷新</a>
            </div>
        </div>
        <div class="search on">
            <div class="search_group">
                <label class="control-label"><span class="respan">*</span>日期：</label>
                <div class="control-inline">
                    <input placeholder="开始日期" class="form-control layer-date search_input" id="callStartTime" autocomplete="off"> -
                    <input placeholder="结束日期" class="form-control layer-date search_input" id="callEndTime" autocomplete="off">
                </div>
            </div>
            <div class="search_group">
                <label class="control-label"><span class="respan">*</span>省市：</label>
                <div class="control-inline"  style="position: relative;">
                    <input id="city" class="form-control city"  readonly type="text" value="" autocomplete="off">
                </div>
            </div>
            <div class="search_group">
                <label class="control-label">满意度：</label>
                <div class="control-inline">
                    <select type="text" id="agree" value="" class="form-control search_input"></select>
                </div>
            </div>
            <div class="search_group">
                <label class="control-label">重复来电：</label>
                <div class="control-inline">
                    <select type="text" id="repeatPhone" value="" class="form-control search_input"></select>
                </div>
            </div>
            <div class="search_group">
                <label class="control-label">客户星级：</label>
                <div class="control-inline">
                    <select type="text" id="customerLevel"  class="form-control search_input selectpicker" title="请选择"></select>
                </div>
            </div>
            <div class="search_group">
                <label class="control-label">话务小结：</label>
                <div class="control-inline">
                    <input type="text" id="tagTrafficSearch0" value="" class="form-control search_input tagName" autocomplete="off"  data-type="0">
                </div>
            </div>
            <div class="search_group">
                <label class="control-label">系统标签：</label>
                <div class="control-inline">
                    <input type="text" id="tagTrafficSearch1" value="" class="form-control search_input tagName" autocomplete="off" data-type="1">
                </div>
            </div>
            <div class="search_group">
                <button id="search" class="btn  btn-primary">查询</button>
                <button id="reset" class="btn  btn-default">重置</button>
            </div>
        </div>
        <div id="barCharts" style="height:500px;" class="charts">

        </div>
        <div class="table_box" style="display: none">
            <div class="table_tools">业务数据 <span class="downIcon" title="导出业务数据" id="export"></span></div>
            <table id="myTable"></table>
        </div>
        <div id="initTip" style="height:200px;display: none;line-height:200px;text-align:center;border: 1px solid #ddd;">亲，请选择必选条件哦！</div>
    </div>
</div>
<div th:text="${key}" id="key" class="hidden"></div>
<div th:text="${keyType}" id="keyType" class="hidden"></div>
<div th:text="${startTime}" id="startTime" class="hidden"></div>
<div th:text="${endTime}" id="endTime" class="hidden"></div>
<div th:text="${pro}" id="pro" class="hidden"></div>
<div th:text="${code}" id="code" class="hidden"></div>
<div th:text="${reCall}" id="reCall" class="hidden"></div>
<div th:text="${satisfaction}" id="satisfaction" class="hidden"></div>
<div th:text="${customerLevel}" id="customerLevelD" class="hidden"></div>
<div th:text="${scene}" id="scene" class="hidden"></div>
<div th:text="${serviceId}" id="serviceId" class="hidden"></div>
<div th:text="${telVal}" id="telVal" class="hidden"></div>
<div th:text="${telR}" id="telR" class="hidden"></div>
<div th:text="${sysVal}" id="sysVal" class="hidden"></div>
<div th:text="${sysR}" id="sysR" class="hidden"></div>
<form action="" id="exportForm" class="hidden" method="post">
    <input type="text" id="callStartTimeE" name="callStartTime">
    <input type="text" id="callEndTimeE" name="callEndTime">
    <input type="text" id="provinceE" name="province">
    <input type="text" id="provinceCodeE" name="provinceCode">
    <input type="text" id="customerLocE" name="customerLoc">
    <input type="text" id="cityNameE" name="cityName">
    <input type="text" id="serviceIdE" name="serviceId">
    <input type="text" id="sceneE" name="scene">
    <input type="text" id="satisfactionE" name="satisfaction">
    <input type="text" id="reCallFlagE" name="recallFlag">
    <input type="text" id="wordNameE" name="wordName">
    <input type="text" id="customerLevelE" name="customerLevel">
    <input type="text" id="sysTagIdsE" name="sysTagIds">
    <input type="text" id="sysOperatorE" name="sysOperator">
    <input type="text" id="telTagIdsE" name="telTagIds">
    <input type="text" id="telOperatorE" name="telOperator">
</form>
<input type="hidden" id="tagTreeId" value="" class="form-control search_input">
<input type="hidden" id="areaTreeId" value="" class="form-control search_input">
<input type="hidden" id="tagTreeType" value="" class="form-control search_input">
<input type="hidden" id="tagProperty" value="" class="form-control search_input">
<script src="../../../assert/js/jquery.js" th:src="@{/assert/js/jquery.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/echarts.min.js" th:src="@{/assert/js/echarts.min.js}"></script>
<script src="../../../assert/js/bootstrap.min.js" th:src="@{/assert/js/bootstrap.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../../assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/assert/js/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script src="../../../assert/js/bootstrap-select.js" th:src="@{/assert/js/bootstrap-select.js}"></script>
<script src="../../../assert/js/plugin/toastr/toastr.min.js"
        th:src="@{/assert/js/plugin/toastr/toastr.min.js}"></script>
<script src="../../../assert/js/base.js" th:src="@{/assert/js/base.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/jquery-ui.min.js" th:src="@{/assert/js/jquery-ui.min.js}"></script>
<script src="../../../assert/js/plugin/layer/laydate/laydate.js"
        th:src="@{/assert/js/plugin/layer/laydate/laydate.js}"></script>
<script src="../../../assert/js/changeTime.js" th:src="@{/assert/js/changeTime.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/jsTree/jstree.min.js"
        th:src="@{/assert/js/plugin/jsTree/jstree.min.js}"></script>
<script src="../../../assert/js/plugin/chosen/chosen.jquery.js"
        th:src="@{/assert/js/plugin/chosen/chosen.jquery.js}"></script>
<script src="../../../assert/js/contabs.min.js" th:src="@{/assert/js/contabs.min.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/common.js" th:src="@{/assert/js/common.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>
<script src="../../../assert/js/plugin/citypicker/city-picker.js" th:src="@{/assert/js/plugin/citypicker/city-picker.js}"></script>
<script src="../../../assert/js/taskCommon.js" th:src="@{/assert/js/taskCommon.js(v_=${@commonController.getSysConfigByPK('CACHE_CODE')})}"></script>

<script>
    //项目名称
    var basePath = $("#basePath").attr("href");
    var json = [
        {
            "id": "1",
            "provinceCode": "北京",
            "workName": "质检任务1",
            "serialNumber": "3a2esfwaeqwwr",
            "customerNum": "18314567896",
            "seatGroup": "A组",
            "seatId": "1203",
            "isEachRecord": "0",
            "holdDuration": "10",
            "callStartTime": "2018-09-03 00:00:00",
            "callEndTime": "2018-09-03 00:00:00",
            "proStatus": "0",
            "reCallFlag": 8,
            "customerNum": "18210872345",
            "num": "8",
        }, {
            "id": "2",
            "provinceCode": "北京",
            "workName": "质检任务2",
            "serialNumber": "4a2esfwaeqwwr",
            "customerNum": "18514567896",
            "seatGroup": "B组",
            "seatId": "1204",
            "isEachRecord": "1",
            "holdDuration": "20",
            "callStartTime": "2018-09-03 00:00:00",
            "callEndTime": "2018-09-03 00:00:00",
            "proStatus": "1",
            "reCallFlag": 8,
            "customerNum": "18210872345",
            "num": "8",
        },
    ];
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function (json) {
            $('#myTable').bootstrapTable("destroy");
            $('#myTable').bootstrapTable({
                data:json,
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                sortable: true,                     //是否启用排序
                sortName: "callNum", //排序方式
                sortOrder: "desc",
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,
                cellStyle: {
                    css: {"background-color": "#fff"}
                },//是否显示父子表
                columns: [
                    {
                        align: "center",
                        halign: "center",
                        title: '序号',//标题  可不加
                        width: 60,
                        formatter: function (value, row, index) {
                            return (index + 1) + "";
                        }
                    },
                    {
                        align: "center",
                        halign: "center",
                        field: 'wordTime',
                        title: '日期'
                    },
                    {
                        field: 'callNum',
                        title: '话务量',
                        align: "center",
                        halign: "center",
                        sortable: true
                    },
                    {
                        field: 'callPerc',
                        title: '话务量占比',
                        align: "center",
                        halign: "center"
                    }
                ],
                onLoadSuccess: function (data) {  //加载成功时执行
                    if (!data.rows||data.rows.length == 0) {
                        var src=basePath+"/assert/image/nodata.png";
                        $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                    }
                },
                onLoadError: function () {  //加载失败时执行
                    var src=basePath+"/assert/image/nodata.png";
                    $(".no-records-found").find("td").html('<img src="'+src+'" th:src="@{/assert/image/nodata.png}" style="width:165px;" alt="">');
                },
                formatLoadingMessage: function () {
                    return '<div class="loaded">' +
                        '<div class="loader">' +
                        '<div class="loader-inner line-scale-pulse-out">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '<div>请稍等，数据正在加载中...</div>';
                }
            });
        };
        return oTableInit;
    };
    var resize = {
        init: function () {
            resize.me();
            $(window).resize(function () {
                resize.me();
                line.myChart.resize();
            })
        },
        me: function () {
            var winW = $(window).width();
            var winH = $(window).height();
//            $(".ibox").width(winW - 20);
//            $(".ibox").height(winH - 20);
        }
    };
    var tools = {
        tableData: [],//表格数据
        modelSelectAudioArr:[],
        reCallFlagArr: [],//重复来电
        agreeArr: [],//满意度
        sceneArr:[],//场景
        serviceClassifyArr:[],//业务分类
        proArr:[],//省市
        customerLevelArr:[],
        tagProArr: [
            {
                "name": "全部",
                "value": ""
            },
            {
                "name": "话务小结",
                "value": 0
            },
            {
                "name": "系统标签",
                "value": 1
            }
        ],
        init: function () {
            tools.selectProvince();
            tools.getReCallFlag();
            tools.getSatStatus();
            tools.getCustomerLevel();
            bs.selectBootStrap($("#tagProperty"), tools.tagProArr);
            bs.dataTime("#callStartTime","#callEndTime","YYYY-MM-DD");
            tools.tabSearch();
            tools.search();
            tools.reset();
            tools.refresh();
            tools.enterSearch();
            tools.export();
            bs.getProCity();
            tools.getCondition();
            $("body").on("click", ".city-select.province a", function () {
                tag.clearTag();
            })
        },
        selectProvince: function () {
            tools.proArr =bs.getProvince();
        },
        getScene:function(){
            var dataArr =bs.getSenceData();
            Object.assign(tools.sceneArr,dataArr);//es6复制数组的方法
            bs.selectDown($("#scene"), tools.sceneArr);
        },
        getCustomerLevel: function () {
            tools.customerLevelArr= bs.getStatus("audio_customer_level");
            bs.selectBootStrap($("#customerLevel"), tools.customerLevelArr);
        },
        getReCallFlag:function(){
            var dataArr = bs.getStatus("recall_flag");
            Object.assign(tools.reCallFlagArr,dataArr);//es6复制数组的方法
            bs.selectDown($("#repeatPhone"), tools.reCallFlagArr);
        },
        getSatStatus:function(){
            var dataArr = bs.getStatus("audio_satisfaction");
            Object.assign(tools.agreeArr,dataArr);//es6复制数组的方法
            bs.selectDown($("#agree"), tools.agreeArr);
        },

        changeState: function (value, arr) {
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                if (value == arr[i].value) {
                    str = arr[i].name
                }
            }
            return str;
        },
        tabSearch: function () {
            var search = $(".search");
            $("#btnSearch").on("click", function () {
                if (search.hasClass("on")) {
                    search.slideUp();
                    search.removeClass("on");
                    $("#btnSearch").html('<i class="fa fa-filter"></i> 查询').attr("title", "显示查询条");
                } else {
                    search.slideDown();
                    search.addClass("on");
                    $("#btnSearch").html('<i class="fa fa-filter"></i> 隐藏').attr("title", "隐藏查询条");
                }

            });
        },
        search: function () {
            $("#search").on("click", function () {
                if($("#callStartTime").val()=="" || $("#callEndTime").val()==""){
                    toastrCog.error("请选择日期！",2000);
                    return
                }
                if($("#city").val()==""){
                    toastrCog.error("请选择省份！",2000);
                    return
                }
                getData.isLoadData();
            })
        },
        reset: function () {
            $("#reset").on("click", function () {
                bs.resetSearch($(".search"),["city"]);
                if($("#laydate_box").length>0){
                    bs.resetTimeElems("#callStartTime","#callEndTime");
                }
                var proCode = $("#spanId", parent.document).attr("data-procode");
                if(proCode == ''){
                    $("#city").citypicker("reset");
                }
                tag.clearTag();
                getData.isLoadData();
            })
        },
        resetSelect: function ($obj) {
            $obj.val("");
            $obj.trigger("chosen:updated");
        },
        refresh: function () {
            $("#refresh").on("click", function () {
                $("#search").click();
            })
        },
        tableRefresh: function () {
            $("#myTable").bootstrapTable('refresh');
        },
        enterSearch: function () {
            $("body").on("keyup", function (e) {
                var code = e.charCode || e.keyCode;
                if (code == 13) {
                    //此处编写用户敲回车后的代码
                    $("#search").click();
                }
            })
        },
        export: function () {
            $("#export").on("click", function () {
                if (getData.dataAll.length==0) {
                    toastrCog.error("没有可导出的数据哦！",2000)
                    return;
                }
                var form = $("#exportForm");
                var proCode=$("#city").attr("code").split("/")[0];
                var city=$("#city").attr("code").split("/")[1];
                var pro=$("#city").val().split("/")[0];
                var cityName=$("a[data-code='"+city+"']").html();
                $("#callStartTimeE").val($("#callStartTime").val());
                $("#callEndTimeE").val($("#callEndTime").val());
                $("#provinceE").val(pro);
                $("#provinceCodeE").val(proCode);
                $("#customerLocE").val(city);
                $("#cityNameE").val(cityName);
                $("#serviceIdE").val($("#serviceClassify").attr("data-id"));
                $("#sceneE").val($("#scene").html());
                $("#satisfactionE").val($("#agree").val());
                $("#reCallFlagE").val($("#repeatPhone").val());
                $("#wordNameE").val($("#key").html());
                $("#customerLevelE").val($("#customerLevel").val());
                $("#sysTagIdsE").val($("#tagTrafficSearch1").val());
                $("#sysOperatorE").val($("#tagTrafficSearch1").attr("data-relation"));
                $("#telTagIdsE").val($("#tagTrafficSearch0").val());
                $("#telOperatorE").val($("#tagTrafficSearch0").attr("data-relation"));
                window.open( bs.getSysConfig("SJWJ_URL_PRE").value+'/exportExcel/buzzwordsDetailExport?'+form.serialize())
            })

        },
        getCondition:function(){
            $("#callStartTime").val($("#startTime").html());
            $("#callEndTime").val($("#endTime").html());
            $("#city").val($("#pro").html()).attr("code",$("#code").html());
            var pro=$("#code").html().split("/")[0];
            var city=$("#code").html().split("/")[1];
            $("a[data-code='"+pro+"']").click();
            $("a[data-code='"+city+"']").click();
            $("#agree").val($("#satisfaction").html()).trigger("chosen:updated");
            $("#repeatPhone").val($("#reCall").html()).trigger("chosen:updated");
            $("#customerLevel").selectpicker('val',$("#customerLevelD").text())
            var tagElem0 = $('#tagTrafficSearch0');
            var tagElem1 = $('#tagTrafficSearch1');
            tagElem0.val($('#telVal').text())
                .attr('data-id',$('#telVal').text())
                .attr('data-relation',$('#telR').text())
                .attr('title',$('#telVal').text());
            tagElem1.val($('#sysVal').text())
                .attr('data-id',$('#sysVal').text())
                .attr('data-relation',$('#sysR').text())
                .attr('title',$('#sysVal').text());
        }
    };
    var line = {
        chart: null,
        data: null,
        dataList: null,
        valueList: null,
        option:{
            title: {
                text:$("#keyType").html()+"-"+$("#key").html()
            },
            color: ['#0c6bbf'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var name = params[0].name;
                    var data = params[0].value;
                    var hb = params[0].data.hb;
                    var zb = params[0].data.zb;
                    var str=name+"<br><span class='dot c1'></span>话务量:"+data+"<br>";
                    if(zb){
                        str+="<span class='dot c3'></span>话务量占比:"+zb+"<br>";
                    }
                    if(hb){
                        str+="<span class='dot c4'></span>话务量环比:"+hb;
                    }
                    return str;
                }
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            dataZoom: [

            ],
            xAxis: [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisLine: {onZero: false}
                }
            ],
            yAxis:[{
                type: 'value'
            }] ,
            series: [ {
                type:'line',
                itemStyle:{
                    normal: {
                    },
                    emphasis: {
                        barBorderWidth: 2,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                },
                data:[]
            }]
        },
        init: function () {
            line.myChart = echarts.init(document.getElementById('barCharts'));
            line.myChart.showLoading();
            line.myChart.setOption(line.option);

        },
        renderOption:function(){
            var start=new Date($("#callStartTime").val()).getTime();
            var end=new Date($("#callEndTime").val()).getTime();
            var timeArr=[$("#callStartTime").val()];
            var num=(end-start)/24/3600/1000;
            for(var i=0;i<num;i++){
                start+=24*3600*1000;
                timeArr.push(dateFormatUtil(start).split(" ")[0]);
            }
            var dataAll=getData.dataAll;
            var seriesM=[];
            var x=0;
            var y=100;
            if(timeArr.length<10){
                line.option.dataZoom=[{
                    show: false,
                    realtime: true,
                }]
            }else {
                x=0;
                y=20;
                line.renderdataZoom(x,y);
            }
            var series=[];
            for(var i=0;i<timeArr.length;i++){
                var time=timeArr[i];
                var num=0;
                var obj={};
                obj.name=time;
                obj.value=num;
                obj.hb=null;
                obj.zb=null;
                if(dataAll.length>0){
                    for(var j=0;j<dataAll.length;j++){
                        var wordTime=dataAll[j].wordTime;
                        var callNum=dataAll[j].callNum;
                        var callPerc=dataAll[j].callPerc;
                        var callHb=dataAll[j].callHb;
                        if(time==wordTime){
                            obj.value=callNum;
                            obj.hb=callHb;
                            obj.zb=callPerc;
                        }
                    }
                }
                series.push(obj);
            }
            line.option.xAxis[0].data=timeArr;
            line.option.series[0].data=series;
            line.option.toolbox.feature.saveAsImage.name="热词分析话务量趋势图";
            line.myChart.setOption(line.option);
        },
        renderdataZoom:function(start,end){
            line.option.dataZoom=[  {
                show: true,
                realtime: true,
                start: start,
                end: end
            },
                {
                    type: 'inside',
                    realtime: true,
                    start: start,
                    end: end
                }];
        }
    };
    var getData={
        dataAll:null,
        init:function(){
            line.myChart.showLoading();
            var proCode=$("#city").attr("code").split("/")[0];
            var city=$("#city").attr("code").split("/")[1];
            var pro=$("#city").val().split("/")[0];
            var cityName=$("a[data-code='"+city+"']").html();
            var params={
                callStartTime:$("#callStartTime").val(),//语音开始的日期
                callEndTime:$("#callEndTime").val(),//语音结束的日期
                province:pro,//省份
                provinceCode:proCode,//省份的编码
                customerLoc:city,//市
                cityName:cityName,//地市名称
                scene:$("#scene").html(),//具体的业务场景
                serviceId:$("#serviceClassify").attr("data-id"),//业务的分类id
                satisfaction:$("#agree").val(),//该通通话客户之满意度
                recallFlag:$("#repeatPhone").val(),//该通通话是否是重复来电
                wordName:$("#key").html(),//词的名称
                customerLevel: $("#customerLevel").val(),
                sysTagIds: $("#tagTrafficSearch1").val(),
                sysOperator: $("#tagTrafficSearch1").attr('data-relation'),
                telTagIds: $("#tagTrafficSearch0").val(),
                telOperator: $("#tagTrafficSearch0").attr('data-relation')
//                callDirection:"0"//通话类型（呼入或呼出）
            };
            $.ajax({
                type: "POST",
                url: bs.getSysConfig("SJWJ_URL_PRE").value+'/dataMining/buzzwordsDetailAnalysis',
                dataType: "json",
                contentType: 'application/json',
                data:JSON.stringify(params),
                async: false,
                success: function (data) {
                    var code=data.rtnCode;
                    if (code ==0) {
                        var result=data.data;
                        var oTable = new TableInit();
                        oTable.Init(result);
                        line.myChart.hideLoading();
                        getData.dataAll=result;
                        line.renderOption();
                    }
                }
            });
        },
        isLoadData:function(){
            if($("#callStartTime").val()!="" && $("#city").val()!=""){
                $("#barCharts").show();
                $(".table_box").show();
                $("#initTip").hide();
                getData.init();//    获取数据
            }else{
                $("#barCharts").hide();
                $(".table_box").hide();
                $("#initTip").show();
            }
        },
    };
    $(function () {
        tools.init();
        line.init();
        var oTable = new TableInit();
        oTable.Init([]);
        resize.init();
        getData.isLoadData();
        tag.init($("#city"),'Search','0');
    })
</script>
</body>
</html>